import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// import用来引入模块，一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部无法获取

import TestRouter from '@/components/TestRouter'
import TestRouter1 from '@/components/TestRouter1'
import TestRouter2 from '@/components/TestRouter2'
import LeftPage from '@/components/LeftPage'
import RightPage from '@/components/RightPage'
import Params from '@/components/GoParams'
import Hi from '@/components/Hi'
import Error from '@/components/Error'

import ChartJsSample from '@/components/charts/ChartJsSample'
import EchartsSample from '@/components/charts/EchartsSample'

Vue.use(Router)

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
      // savedPosition is only available for popstate navigations.
      return savedPosition
  } else {
      const position = {}
      // new navigation.
      // scroll to anchor by returning the selector
      if (to.hash) {
        //平滑滚动
        return {
          selector: to.hash,
          behavior: 'smooth',
        }
      }
      // check if any matched route config has meta that requires scrolling to top
      if (to.matched.some(m => m.meta.scrollToTop)) {
          // cords will be used if no selector is provided,
          // or if the selector didn't match any element.
          position.x = 0
          position.y = 0
      }
      // if the returned position is falsy or an empty object,
      // will retain current scroll position.
      return position
  }
}

export default new Router({
  // mode:'hash',

  // mode: 'history',
  // scrollBehavior,
  routes: [
    {
      path: '/',
      name: 'Main',
      components:{
        default:() => import('@/views/index.vue'),
        left: LeftPage,
        right: RightPage
      }
      // 配置了scrollToTop为true，点击这个路由，页面会滚到顶部
      // 如果没配置scrollToTop或配置scrollToTop为false，点击这个路由，页面保持原先的滚动位置
      // 效果说明：点击这个路由后，滚动页面隐藏顶部的一部分，再点击另一个路由,页面保持原先的滚动位置;
      //再点击这个路由,页面会滚动到顶部，因为配置了scrollToTop为true
      // meta: { scrollToTop: true }
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      components: {
        default:HelloWorld
      }
    },
    {
      path: '/TestRouter',
      component: TestRouter,
      children:[
        {
          path: '/',
          name: 'TestRouter',
          component: TestRouter1,
        },
        {
          // 子路由的路径前不加/
          path:'testR1',
          name:'TestRouter1',
          component:TestRouter1,
        },
        {
          path:'testR2',
          name:'TestRouter2',
          component:TestRouter2,
        }
      ]
    },
    {
      path: '/CommentsMessage',
      name:'CommentsMessage',
      component: () => import('@/components/comments/CommentsMessage.vue'),
    },
    {
      path: '/ShopCart',
      name:'ShopCart',
      component: () => import('@/components/ShopCart.vue'),
    },
    {
      path: '/ElementTableSample',
      name:'ElementTableSample',
      component: () => import('@/components/ElementTableSample.vue'),
    },
    {
      path: '/EmbededTable',
      name:'EmbededTable',
      component: () => import('@/components/EmbededTable.vue'),
    },
    {
      path: '/ChartJsSample',
      name:'ChartJsSample',
      component: () => import('@/components/charts/ChartJsSample.vue'),
    },
    {
      path: '/EchartsSample',
      name:'EchartsSample',
      component: () => import('@/components/charts/EchartsSample.vue'),
    },
    {
      path: '/ScrollLoadingSample',
      name:'ScrollLoadingSample',
      component: () => import('@/components/ScrollLoadingSample.vue'),
    },
    {
      path: '/LinkingSelect',
      name:'LinkingSelect',
      component: () => import('@/components/LinkingSelect.vue'),
    },
    {
      path: '/goHome',
      // 重定向到首页
      redirect:'/'
    },
    {
      path: '/Hi',
      // 通过url传参数
      component: Hi,
      // 别名
      alias: '/joe'
    },
    {
      path:'/params/:newsId(\\d+)/:newsTitle',
      // 通过url传参数
      component: Params,
      // 导航钩子函数，在路由改变前或后触发
      // to 即将要进入的目标的路由对象
      // from 当前导航即将要离开的路由对象
      // next() 调用该方法后，才能进入下一个钩子
      beforeEnter:(to,from,next)=>{
        console.log(to);
        console.log(from);
        next();
      }

      //路由守卫
      // 共有三种守卫：
      // 1:全局守卫：beforeEach,afterEach
      // 2:路由独享守卫：beforeEnter
      // 3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
      // 他们执行顺序：全局>路由>组件
    },
    {
      path:'/GoParams/:newsId(\\d+)/:newsTitle',
      // 重定向时将参数带过去
      redirect:'/params/:newsId(\\d+)/:newsTitle'
    },
    // 没有找到页面404，路径设置为星号*
    //并且要放在所有路径的最后面
    {
      path:'*',
      component: Error
    },
  ]
})
